<template>
	<view>
		<view class="plr-36 ptb-10" v-if="img">
			<image :src="img" class="radius-15 w100" mode="widthFix"></image>
		</view>
		<view class="">
			<view class="flex plr-36 pt-20">
				<view @click="getTab(0)">
					<text :class="[tab==0?'yellow size-26 bold':'']">销量排序</text>
					<u-icon :name="tab==0&&order?'arrow-up-fill':'arrow-down-fill'" size="24" :color="tab==0?'#F66E23':'#bbb'" class="ml-10"></u-icon>
				</view>
				<view @click="getTab(1)">
					<text :class="[tab==1?'yellow size-26 bold':'']">价格排序</text>
					<u-icon :name="tab==1&&order?'arrow-up-fill':'arrow-down-fill'" size="24" :color="tab==1?'#F66E23':'#bbb'" class="ml-10"></u-icon>
				</view>
				<view @click="getTab(2)">
					<text :class="[tab==2?'yellow size-26 bold':'']">离我最近</text>
					<u-icon name="arrow-down-fill" size="24" :color="tab==2?'#F66E23':'#bbb'" class="ml-10"></u-icon>
				</view>
			</view>
			<empty v-if="total===0" text="暂无商品" top="100"></empty>
			<view class="flex_l flex-wrap pl-36">
				<goodItem :hasBtn="false" style="width: 46%;" class="mr-20 mtb-10" :item="item" v-for="(item, key) in list" :key="key"></goodItem>
			</view>
		</view>
		<u-loadmore v-show="list.length && list.length <= total" :status="status" icon-type="flower" bg-color="transperant" margin-top="30" margin-bottom="30" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: 0,
				sortList: ['sales_count', 'integral', 'distance'],
				img: '',
				order: false,
				list: [],
				status: 'loadmore',
				total: null,
				page: 1,
			};
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			this.getList()
		},
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.getList()
		},
		onLoad(option) {
			this.img = option.img;
			uni.setNavigationBarTitle({
				title: option.cat_name
			})
			this.getList()
		},
		methods: {
			changeTab(tab) {
				this.tab = tab
				this.page = 1
				this.list = []
				this.status = 'loadmore'
				this.getList()
			},
			getTab(i) {
				this.isActive = i
				this.order = !this.order;
				this.changeTab(i);
			},
			getList() {
				this.status = "loading";
				let sort = this.sortList[this.tab] ? this.sortList[this.tab] : this.sortList[0];
				this.$http('/api/integralgoods/index', {
					sort: sort,
					order: this.order ? 'ASC' : 'DESC',
					page: this.page
				}).then(data => {
					this.list = this.list.concat(data.rows);
					this.total = data.total;
					if (this.list.length >= data.total) {
						this.status = "nomore";
					} else {
						this.page = this.page + 1
						this.status = "loadmore";
					}
					uni.stopPullDownRefresh();
				});
			}
		}
	}
</script>

<style lang="scss">

</style>
